<template>
  <Echart
    :options="areaOptions"
    id="areaChart"
    class="area-echarts_center"
    v-if="pageflag"
    ref="charts"
  ></Echart>
  <Reacquire v-else @onclick="getData" style="line-height: 100px">
    重新获取
  </Reacquire>
</template>

<script>
export default {
  data() {
    return {
      option: {},
      pageflag: false,
      areaTypeOption: [
        { value: 1, label: "制造区" },
        { value: 2, label: "高贸区" },
        { value: 3, label: "商务区" },
        { value: 4, label: "旅游区" },
        { value: 5, label: "其他" },
      ],
      timer: null,
    };
  },
  created() {},

  mounted() {
    this.getData();
  },
  beforeDestroy() {},
  methods: {
    async getData() {
      try {
        let res = {
          1: 9,
          2: 15,
          3: 1,
          5: 2,
        };
        this.pageflag = true;
        const data = [
          { value: 0, name: "制造区", id: 1 },
          { value: 0, name: "高贸区", id: 2 },
          { value: 0, name: "旅游区", id: 3 },
          { value: 0, name: "商务区", id: 4 },
          { value: 0, name: "其他", id: 5 },
        ];
        // for in 遍历对象的属性名
        for (const i in res) {
          // 循环遍历区域类型，匹配id相等的给value赋值
          data.map((item) => {
            // eslint-disable-next-line eqeqeq
            if (item.id == i) {
              item.value = res[i];
              return item;
            }
          });
        }
        // 回显到 echart 图表
        this.initArea(data);
      } catch {
        // 请求失败，显示重新获取
        this.pageflag = false;
      }
    },
    initArea(newData) {
      this.areaOptions = {
        color: ["#FDB528", "#6DBB5D", "#2244B9", "#DF625F", "#66C8F6"],
        series: [
          {
            type: "pie",
            radius: [50, 80],
            // with: 500,
            // height: '99%',
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              // alignTo: 'edge',
              formatter: "{name|{b}}\n{value|{c}}",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                name: {
                  fontSize: 12,
                  color: "#fff",
                },
                value: {
                  fontSize: 10,
                },
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: true,
              // normal: {
              //   show: true // 引导线显示
              // },
              // length: 10,
              // length2: 30,
              // maxSurfaceAngle: 80
            },
            // eslint-disable-next-line no-dupe-keys
            // labelLayout: function (params) {
            //   const isLeft = params.labelRect.x < 50000 / 2;
            //   const points = params.labelLinePoints;
            //   // Update the end point.
            //   points[2][0] = isLeft
            //     ? params.labelRect.x
            //     : params.labelRect.x + params.labelRect.width;
            //   return {
            //     labelLinePoints: points
            //   };
            // },
            data: newData,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>
